<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            width: 700px;
            margin: 100px auto;
            text-align: center;
            font-size: 15px;
            border-collapse: collapse;
        }

        th{
            height: 40px;
            background-color: blueviolet;
        }

        tr{
            height: 40px;
        }

        td{
            border-bottom: 1px solid black;
            height: 40px;
            font-size: 14px;
        }

        .bw{
            background-color: yellow;   
        }
    </style>
</head>
<body>
        <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>商品名称</th>
                        <th>价格</th>
                        <th>库存</th>
                        <th>当日出售</th>
                        <th>剩余</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>111</td>
                        <td>西瓜</td>
                        <td>11.5</td>
                        <td>555</td>
                        <td>15</td>
                        <td>333</td>
                    </tr>
                    <tr>
                        <td>222</td>
                        <td>苹果</td>
                        <td>11.5</td>
                        <td>555</td>
                        <td>15</td>
                        <td>333</td>
                    </tr>
                    <tr>
                        <td>333</td>
                        <td>香蕉</td>
                        <td>11.5</td>
                        <td>555</td>
                        <td>15</td>
                        <td>333</td>
                    </tr>
                    <tr>
                        <td>444</td>
                        <td>桃子</td>
                        <td>11.5</td>
                        <td>555</td>
                        <td>15</td>
                        <td>333</td>
                    </tr>
                    <tr>
                        <td>555</td>
                        <td>石榴</td>
                        <td>11.5</td>
                        <td>555</td>
                        <td>15</td>
                        <td>333</td>
                    </tr>
                    <tr>
                        <td>666</td>
                        <td>梨子</td>
                        <td>11.5</td>
                        <td>555</td>
                        <td>15</td>
                        <td>333</td>
                    </tr>
                </tbody>
            </table>

            <script>
                const trs = document.querySelectorAll('tr')
                /* 
                    需求：对每行绑定鼠标移入和移除事件
                 */

                 for(const tr of trs){
                     tr.onmouseover = function(){
                        //  console.log("鼠标移入")
                        //设置当前tr元素的颜色位bw
                        this.className = 'bw'
                     }
                     tr.onmouseout = function(){
                        //  console.log("鼠标移出")
                        this.className= '';
                     }
                 }
            </script>
</body>
</html>